<!--  -->
<template>
  <div class="video-box clearfix">
    <el-card class="video-left">
      <div class="video-title">监控列表</div>
      <el-input placeholder="请输入关键字进行查询" v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-card>
    <el-card class="video-right">
      <iframe :src="src" frameborder="" class="video-iframe">111</iframe>
    </el-card>
  </div>
</template>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// import { putObj, CrCarType } from '@/api/crcar'
// import { getCompanyByPhone } from "@/api/common"
<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      filterText: "",
      treeList: [
        {
          id: 1,
          label: "监控 1",
          url: "https://www.baidu.com",
        },
        {
          id: 2,
          label: "监控 2",
          url: "https://www.bilibili.com",
        },
        {
          id: 3,
          label: "监控 3",
          url: "https://cn.vuejs.org/",
        },
      ],
      // treeList: [
      //   {
      //     label: "监控 1",
      //     children: [
      //       {
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             id: 1,
      //             label: "三级 1-1-1",
      //             url: "https://www.baidu.com",
      //           },
      //           {
      //             id: 2,
      //             label: "三级 1-1-2",
      //             url: "https://www.bilibili.com",
      //           },
      //           {
      //             id: 3,
      //             label: "三级 1-1-3",
      //             url: "https://cn.vuejs.org/",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     label: "监控 2",
      //     children: [
      //       {
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             id: 4,
      //             label: "三级 1-1-1",
      //             url: "https://www.baidu.com",
      //           },
      //           {
      //             id: 5,
      //             label: "三级 1-1-2",
      //             url: "https://www.bilibili.com",
      //           },
      //           {
      //             id: 6,
      //             label: "三级 1-1-3",
      //             url: "https://cn.vuejs.org/",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     label: "监控 3",
      //     children: [
      //       {
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             id: 7,
      //             label: "三级 1-1-1",
      //             url: "https://www.baidu.com",
      //           },
      //           {
      //             id: 8,
      //             label: "三级 1-1-2",
      //             url: "https://www.bilibili.com",
      //           },
      //           {
      //             id: 9,
      //             label: "三级 1-1-3",
      //             url: "https://cn.vuejs.org/",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    handleNodeClick(data) {
      if (data.id) {
        this.src = data.url;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.video-left {
  float: left;
  width: 15%;
  text-align: center;
  margin-left: 10px;
}
.video-right {
  width: 83%;
  float: right;
  height: 850px;
  margin: 0 10px 0 0;
}
.video-iframe {
  width: 100%;
  height: 840px;
}
.video-title {
  padding-bottom: 15px;
  font-weight: 700;
}
.el-input {
  margin-bottom: 5px;
  padding-left: 5px;
  margin-left: -7px;
}
/deep/ .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
</style>
